﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Title -->
    <title>Rapid - A Responsive WordPress Blog Theme</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/assets1/css/bootstrap.min.css">

    <!--矢量图标-->
    <link rel="stylesheet" href="/style/icon/icon.css">
    
    <!-- Font awesome CSS -->
    <link rel="stylesheet" href="/assets1/css/font-awesome.min.css">
    
    <!-- Animate CSS -->
    <link rel="stylesheet" href="/assets1/css/animate.min.css">
    
    <!-- OwlCarousel CSS -->
    <link rel="stylesheet" href="/assets1/css/owl.carousel.css">
    
    <!-- SlickNav CSS -->
    <link rel="stylesheet" href="/assets1/css/slicknav.min.css">
    
    <!-- Magnific popup CSS -->
    <link rel="stylesheet" href="/assets1/css/magnific-popup.css">
    
    <!-- Main CSS -->
    <link rel="stylesheet" href="/assets1/css/style.css">
    
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/assets1/css/responsive.css">

</head>
<body>

<!-- 头部图片logo 开始 -->
<section  th:replace="~{common/blogHead :: blogHead}">
</section>
<!-- 头部图片logo 结束 -->

<!-- 头部菜单 开始-->
<section  th:replace="~{common/blogMenu :: blogMenu}">
</section>
<!-- 头部菜单 结束 -->
    
    <!-- 面包屑 -->
    <section class="rapid-breadcromb-area section_50">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="breadcromb">
                        <h3 th:text="${tag.tagName}"></h3>
                        <ul>
                            <li><a href="/static">首页</a></li>
                            <li>/</li>
                            <li th:text="${tag.tagName}"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 面包屑 -->
    
    
    
    <!-- 内容区域起始 -->
    <section class="rapid-Allpost-area section_50">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="blog-page-left">
                        <div th:each="tagArticle : ${tagArticlesList}" class="single-blog">
                            <div class="blog-image">
                                <a  th:href="'/article/'+ ${tagArticle.id}">
                                    <img th:src="@{'/assets/img/' + ${tagArticle.image}}" alt="blog"/>
                                </a>
                            </div>
                            <div class="blog-text">
                                <div class="post-cat">
                                    <p th:text="${tagArticle.category.categoryName}"></p>
                                </div>
                                <h2><a th:text="${tagArticle.title}" th:href="'/article/'+ ${tagArticle.id}"></a></h2>
                                <div class="blog-meta">
                                    <ul>
                                        <li th:text="'-:' + ${#dates.format(tagArticle.releaseDate, 'yyyy-MM-dd HH:mm:ss')}"></li>
                                        <li><a th:text="${tagArticle.user.userName}" href="#"></a></li>
                                        <li><a href="#">6 <i class="fa fa-comments-o"></i></a></li>
                                    </ul>
                                </div>
                                <div th:utext="${tagArticle.content}" class="post-content post-content-index">
                                </div>
                                <a th:href="'/article/'+ ${tagArticle.id}" class="rapid-btn">阅读更多</a>
                                <div class="share-button-social">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--分页 开始-->
                    <div class="pagination_box" th:utext="${pageCode}">
                    </div>
                    <!--分页 结束-->
                </div>
                <!--右侧主内容开始-->
                <div  th:replace="~{common/blogRight :: blogRight}"></div>
                <!--右侧主内容结束-->
            </div>
        </div>
    </section>
    <!-- 内容区域结束 -->


<!-- 页脚区域开始 -->
<footer th:replace="~{common/blogDown :: blogDown}">
</footer>
<!-- 页脚区域结束 -->
    
    <!-- jQuery -->
    <script src="/assets1/js/jquery.min.js"></script>
    
    <!-- Bootstrap JS -->
    <script src="/assets1/js/bootstrap.min.js"></script>
    
    <!-- Magnific Popup JS -->
    <script src="/assets1/js/jquery.magnific-popup.min.js"></script>
    
    <!-- OwlCarousel JS -->
    <script src="/assets1/js/owl.carousel.min.js"></script>
    
    <!-- SlickNav JS -->
    <script src="/assets1/js/jquery.slicknav.min.js"></script>
    
    <!-- Custom JS -->
    <script src="/assets1/js/custom.js"></script>

<!--全局\退出js-->
<script src="/assets1/js/common.js"></script>

<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    });

    <!--已有窗口跳转（避免创建多个重复窗口）(抖音，小红书跳转)-->
    const windows = {};  // 用于存储打开的窗口

    $('.external-link').on('click', function(e) {
        e.preventDefault();

        const url = $(this).attr('href');  // 获取链接目标 url
        const name = url.replace(/\W/g, '');  // 移除非字母数字字符用作窗口名称

        // 如果窗口未打开，或者窗口已经被关闭，则重新打开窗口
        if (typeof windows[name] == 'undefined' || windows[name].closed) {
            windows[name] = window.open(url, name);
        } else {
            windows[name].focus();  // 否则，让已打开的窗口获取焦点
        }
    });

    <!--切换分页时保存滚轮位置-->
    function keepScrollPos(url) {
        //存储滚动位置
        const scrollPos = $(window).scrollTop();
        localStorage.setItem('scrollPos', scrollPos);

        // 重定向到点击的页面
        window.location.href = url;
        return false;
    }

    <!--加载页面时，获取滚轮位置-->
    $(document).ready(function() {
        //检索滚动位置
        const scrollPos = localStorage.getItem('scrollPos');
        if (scrollPos) {
            $(window).scrollTop(scrollPos);
            localStorage.removeItem('scrollPos');
        }
        $('#logoutLink').on('click', function(e) {
            e.preventDefault();
            logout();  // 在这里我可以直接使用common.js中定义的logout()函数
        });
    });

</script>
</body>
</html>
